<template>
  <div>
    <div class="shopcart_topBar">
      <i class="el-icon-shopping-cart-2"></i>
      <span>我的购物车</span>
    </div>
    <empty-shopcart v-if="!isHidden" componentNameType="您的购物车还是空的！"></empty-shopcart>
    <list-shopcart v-else></list-shopcart>
  </div>
</template>

<script>
  import EmptyShopcart from "components/shopcart/EmptyShopcart";
  import ListShopcart from "components/shopcart/ListShopcart";
  export default {
    name: "Shopcart",
    components:{
      EmptyShopcart,
      ListShopcart
    },
    created() {

    },

    data(){
      return{

      }
    },
    computed:{
      isHidden(){
        if(this.$store.state.userId == null || this.$store.state.userId === ''){
          return false;
        }else{
          if(this.$store.state.shopcartCount === 0){
            return false;
          }
        }
        return true;
      }
    },

  }
</script>

<style scoped>
  .shopcart_topBar{
    padding-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid #E0E0E0;
    font-size: 20px;
  }
  .shopcart_topBar span{
    margin-left: 10px;
  }
</style>
